import { useState, useMemo, useEffect } from 'react';
import { Checkbox, Radio, Switch } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { TextWidget, getMessage } from '@inbiz/react';
import PopoverComponent from './PopoverComponent';
import MultilingualInput from '../../.././../../MultilingualInput';
import { defaultPlusSignButtonConfig } from '../../../utils';
import '../style.less';

export default function PlusSign(props) {
    const { value, onChange, form } = props;
    const [popoverVisible, setPopoverVisible] = useState(false);
    const [plusSignLogic, setPlusSignLogic] = useState<string>('');
    const [signingRules, setSigningRules] = useState<boolean>(false);
    const [plussignActions, setPlussignActions] = useState<any[]>([]);
    plussignActions
    const buttonItem = useMemo(() => {
        return value?.find((item) => item?.action == 'plusSign');
    }, [value]);

    const onCheckChange = (e: { target: { checked: boolean; }; }) => {
        const _value = value?.map((item) => {
            if (item?.action == 'plusSign') {
                return {
                    ...item,
                    enable: e?.target?.checked,
                }
            } else {
                return item;
            };
        });
        onChange(_value);
    };

    const onTextChange = () => {
        const _value = value?.map((item) => {
            if (item?.action == 'plusSign') {
                return {
                    ...item,
                    enable: !buttonItem?.enable,
                }
            } else {
                return item;
            };
        });
        onChange(_value);
    };

    const onInputChange = (val: string) => {
        const _value = value?.map((item) => {
            if (item?.action == 'plusSign') {
                return {
                    ...item,
                    name: val,
                }
            } else {
                return item;
            };
        });
        onChange(_value);
    };

    const onFormPlusSignChange = (newButtons: any[]) => {
        const _buttonSetting = form?.getFieldsValue()?.buttonSetting;
        form?.setFieldValue('buttonSetting', {
            ..._buttonSetting,
            plussignActions: newButtons,
        });
    };

    const onRadioChange = (e: any) => {
        const _val = e?.target?.value;
        setPlusSignLogic(_val);
        const _buttonSetting = form?.getFieldsValue()?.buttonSetting;
        form?.setFieldValue('buttonSetting', {
            ..._buttonSetting,
            plusSignLogic: _val,
        });
    };

    const onSigningRulesChange = (checked: boolean) => {
        setSigningRules(checked);
        const _buttonSetting = form?.getFieldsValue()?.buttonSetting;
        form?.setFieldValue('buttonSetting', {
            ..._buttonSetting,
            signingRules: checked,
        });
    };

    const onPlusSignInputChange = (val: string, action: string) => {
        const _plusSignButtonConfig = plussignActions?.map((item) => {
            if (item?.action == action) {
                return {
                    ...item,
                    text: val,
                };
            } else {
                return item;
            };
        });
        setPlussignActions(_plusSignButtonConfig);
        onFormPlusSignChange(_plusSignButtonConfig);
    };

    const onPlusSignCheckChange = (action: string, e?: { target: { checked: boolean; }; }) => {
        let _plusSignButtonConfig: any[] = [];
        if (!e) {
            _plusSignButtonConfig = plussignActions?.map((item) => {
                if (item?.action == action) {
                    return {
                        ...item,
                        enable: !item?.enable,
                    };
                } else {
                    return item;
                };
            });
        } else {
            const checked = e?.target?.checked;
            _plusSignButtonConfig = plussignActions?.map((item) => {
                if (item?.action == action) {
                    return {
                        ...item,
                        enable: checked,
                    };
                } else {
                    return item;
                };
            });
        };
        setPlussignActions(_plusSignButtonConfig);
        onFormPlusSignChange(_plusSignButtonConfig);
    };

    useEffect(() => {
        const _buttonSetting = form?.getFieldsValue()?.buttonSetting;
        setPlusSignLogic(_buttonSetting?.plusSignLogic || 'skipCurrent');
        setSigningRules(_buttonSetting?.signingRules ?? false);
        if (!_buttonSetting?.plussignActions || _buttonSetting?.plussignActions && _buttonSetting?.plussignActions?.length == 0) {
            setPlussignActions(defaultPlusSignButtonConfig);
            form?.setFieldValue('buttonSetting', {
                ..._buttonSetting,
                plussignActions: defaultPlusSignButtonConfig,
            });
        } else {
            setPlussignActions(_buttonSetting?.plussignActions);
        };
    }, [form?.getFieldsValue()?.buttonSetting]);

    return (
        <>
            <div className='process-designer-button'>
                <Checkbox checked={buttonItem?.enable} onChange={onCheckChange} />
                <div className='process-designer-button-text' title='加签' onClick={onTextChange} >加签</div>
                {
                    buttonItem?.enable
                    &&
                    <>
                        <MultilingualInput value={buttonItem?.name} onChange={onInputChange} />
                        <PopoverComponent
                            popoverVisible={popoverVisible}
                            setPopoverVisible={setPopoverVisible}
                            value={value}
                            onChange={onChange}
                            type='plusSign'
                        />
                    </>
                }
            </div>
            {
                buttonItem?.enable
                &&
                <div className='process-designer-button-config'>
                    <div className='process-designer-button-plusSign-config-form'>
                        <div className='process-designer-button-plusSign-config-form-label'>
                            加签逻辑
                        </div>
                        <Radio.Group name='radiogroup' value={plusSignLogic} onChange={onRadioChange}>
                            <Radio value={'skipCurrent'}>前加签</Radio>
                            <Radio value={'skipNext'}>后加签</Radio>
                            <Radio value={'customSkip'}>用户自定义</Radio>
                        </Radio.Group>
                    </div>
                    <div className='process-designer-button-plusSign-config-form'>
                        <div className='process-designer-button-plusSign-config-form-label'>
                            被动完成转加签
                            <ExclamationCircleOutlined title={'配置是否将多人任务中的被动完成审批人加入到后加签节点进行审批'} style={{ cursor: 'pointer' }} />
                        </div>
                        <Switch checked={signingRules} onChange={onSigningRulesChange} />
                    </div>
                    <div className='process-designer-button-plusSign-config-button'>
                        加签按钮设置
                        {
                            plussignActions?.map((item) => {
                                return (
                                    <div className='process-designer-button-plusSign-config-button-item' key={item?.action}>
                                        <div className='process-designer-button-plusSign-config-button-left'>
                                            <Checkbox disabled={item?.disabled} checked={item?.enable} onChange={(e) => { onPlusSignCheckChange(item?.action, e) }} />
                                            <div className='process-designer-button-config-button-item-text' title={getMessage(item?.actionLang)} onClick={() => { onPlusSignCheckChange(item?.action); }}><TextWidget>{item?.actionLang}</TextWidget></div>
                                        </div>
                                        <MultilingualInput value={item?.text} onChange={(val: string) => { onPlusSignInputChange(val, item?.action) }} />
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            }
        </>
    )
};